<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
// 绘制图形
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
// map 配置项
import { mapOptions, attribution } from '@/constants/map';
import { handleMessage } from '@/utils/globalEvent';

// leaflet 地图实例
let map: L.Map | null = null;
// 开始绘制属性
const getShape = {
	Marker: '绘制标记',
	Line: '绘制线段',
	Rectangle: '绘制长方形',
	Polygon: '绘制多边形',
	Circle: '绘制圆型',
	CircleMarker: '画圆圈标记',
	Text: '编写文本',
	Cut: '剪切图层',
};

// 创建地图
const createMap = () => {
	// 创建地图实例
	map = L.map('leafletMap', mapOptions);
	// 加载图层
	L.tileLayer(import.meta.env.VITE_GAODE_MAP, {
		// 如果设置此项为true，则切片不会用重复填充来表示世界范围（经度-180到180之间）之外的地方
		noWrap: true,
		// 左下角版权信息
		attribution,
	}).addTo(map);
	// 加载交互绘制图形插件
	map.pm.addControls({
		// 工具条位置
		position: 'topleft',
		// 添加按钮绘制标记
		drawMarker: true,
		// 添加按钮以绘制圆形标记
		drawCircleMarker: true,
		// 添加按钮绘制线条
		drawPolyline: true,
		// 添加按钮绘制矩形
		drawRectangle: true,
		// 添加绘制多边形
		drawPolygon: true,
		// 添加按钮绘制圆圈
		drawCircle: true,
		// 添加按钮编辑多边形
		editMode: true,
		// 添加按钮拖动多边形
		dragMode: true,
		// 添加一个切割图层按钮
		cutPolygon: true,
		// 添加一个移除图层按钮
		removalMode: true,
	});
	// 修改插件默认语言为中文
	map.pm.setLang('zh');
};

// 绘制图形触发事件
const handleEvent = () => {
	// 当绘制模式启用的时候调用。参数包含图形类型和工作图层
	map?.on('pm:drawstart', e => {
		handleMessage(`开始${(getShape as any)[e.shape]}`);
	});
	// 当一个图形被绘制完毕后调用，参数包含图形类型和工作图层
	map?.on('pm:create', e => {
		// const { _latlng, _latlngs } = e.layer as any;
		// console.log(_latlng || _latlngs);
		handleMessage(`已获取${(getShape as any)[e.shape]}经纬度`);
	});
	// 当绘制模式关闭的时候调用，参数包含图形类型
	map?.on('pm:drawend', e => {
		handleMessage(`取消${(getShape as any)[e.shape]}`, 'info');
	});

	// 当图层被编辑的时候触发
	map?.on('pm:edit', e => {
		console.log(e, '被编辑');
	});
	// 当图层被编辑且坐标发生了变化触发
	map?.on('pm:update', e => {
		console.log(e, '编辑坐标发生改变');
	});
	// 当图层的编辑模式关闭的时候触发
	map?.on('pm:disable', e => {
		console.log(e, '结束编辑模式');
	});

	// 当图层开始拖拽的时候触发
	map?.on('pm:dragstart', e => {
		console.log(e, '开始拖拽');
	});
	// 当图层已经拖拽完毕后触发
	map?.on('pm:drag', e => {
		console.log(e, '拖拽结束');
	});
	// 当图层停止正在拖拽的时候触发
	map?.on('pm:dragend', e => {
		console.log(e, '停止拖拽');
	});

	// 当图层被切割的时候触发
	map?.on('pm:cut', e => {
		// const { _latlngs } = e.layer as any;
		handleMessage(`已${(getShape as any)[e.shape]}`);
	});

	// 当图层通过移除模式被移除的时候触发
	map?.on('pm:remove', e => {
		handleMessage(`已移除${(getShape as any)[e.shape]}经纬度`, 'warning');
	});
};

// 初始化地图
const initMap = () => {
	createMap();
	handleEvent();
};
// 创建地图
onMounted(() => {
	initMap();
});
// 销毁地图
onBeforeUnmount(() => {
	map?.remove();
	map = null;
});
</script>

<template>
	<div class="draw-graph">
		<div id="leafletMap" class="map"></div>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
